<template>
  <div class="wrapper">
    <div class="top">
      <div class="top__bgcolor"/>
      <div class="top__header">
        <div class="top__header__back iconfont" @click="handleGoBack">&#xe8b5;</div>
      确认订单
      </div>
      <div class="top__receiver">
        <div class="top__receiver__title">收获地址</div>
        <div class="top__receiver__address">北京理工大学科技园2号楼</div>
        <div class="top__receiver__info">
          <span class="top__receiver__infoname">柚子</span>
          <span class="top__receiver__infotel">18765667569</span>
        </div>
        <div class="top__receiver__enter iconfont">&#xe667;</div>
      </div>
    </div>
    <div class="products">
      <div class="products__title">沃尔玛</div>
        <div class="products__item" v-for="item in goodsInfo" :key="item._id">
          <img v-if="item.imgUrl" class="products__item__img" :src="item.imgUrl" alt="商品图片">
          <div class="products__item__detail">
           <h4 class="products__item__title">{{ item.name }}</h4>
            <p class="products__item__price">
              <span class="products__item__price__yen">&yen;{{ item.price }} x {{ item.count }}</span>
              <span class="products__item__price__totalprice">&yen;{{ (item.price*item.count).toFixed(2) }}</span>
            </p>
          </div>
        </div>
    </div>
    <div class="order">
      <div class="order__price">实付金额 <b>&yen; {{ computedResult.price }}</b></div>
      <div class="order__btn" @click="() => isCommit = true">提交订单</div>
    </div>
  </div>
  <div class="mask" v-show="isCommit" @click.self="() => isCommit = false">
    <div class="mask__content">
      <h3 class="mask__content__title">确认离开收银台</h3>
      <p class="mask__content__desc">请尽快完成支付，否则将被取消</p>
      <div class="mask__content__btns">
        <div class="mask__content__btn mask__content__btn--quit" @click="handleConfrimCommit(true)">取消订单</div>
        <div class="mask__content__btn mask__content__btn--sure" @click="() => handleConfrimCommit(false)">确认支付</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { useGoodsCountEffect } from '../../commonEffect/cartEffect'
import { commitOrder } from '../../api/detail.js'

const useStoreCartListEffect = () => {
  const route = useRoute()
  const shopId = route.params.id
  const { goodsInfo, computedResult } = useGoodsCountEffect(shopId)

  return { shopId, goodsInfo, computedResult }
}

const useRouterEffect = () => {
  const router = useRouter()
  const handleGoBack = () => {
    router.go(-1)
  // router.back()
  }

  return { handleGoBack, router }
}

const useCommitOrderEffect = (shopId, goodsInfo, router) => {
  const isCommit = ref(false)
  // 点击提交订单按钮，展示 mask 遮罩层，取消订单按钮， 关闭 mask 遮罩层
  const store = useStore()
  // 确认提交，生成订单
  const handleConfrimCommit = async (isCanceled) => {
    const products = []
    for (const i in goodsInfo.value) {
      const product = goodsInfo.value[i]
      const productObj = {
        id: product._id,
        num: product.count
      }
      products.push(productObj)
    }
    try {
      const res = await commitOrder({ addressId: '1', shopId, shopName: '沃尔玛', isCanceled, products })
      console.log(res)
      if (res?.errno !== 0) return
      store.commit('clearAllGoods', shopId)
      router.push('/order')
    } catch (error) {
    }
  }

  return { isCommit, handleConfrimCommit }
}
export default {
  name: 'SureOrder',
  setup () {
    const { shopId, goodsInfo, computedResult } = useStoreCartListEffect()

    const { router, handleGoBack } = useRouterEffect()

    const { isCommit, handleConfrimCommit } = useCommitOrderEffect(shopId, goodsInfo, router)

    return { goodsInfo, computedResult, isCommit, handleGoBack, handleConfrimCommit }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixins.scss';
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, #fff 15%, #ccc 100%);
}
.top {
  position: relative;
  height: 1.96rem;
  background-size: 100% 1.59rem;
  background-image: linear-gradient( to top, #fff 4%, #a8edea 80%);
  background-repeat: no-repeat;
  &__header {
    position: relative;
    padding-top: .2rem;
    line-height: .24rem;
    color: #fff;
    text-align: center;
    font-size: .16rem;
    &__back {
      position: absolute;
      left: .18rem;
      font-size: .22rem;
    }
  }
  &__receiver {
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    bottom: 0;
    height: 1.11rem;
    background-color: #fff;
    border-radius: .04rem;
    &__title {
      line-height: .22rem;
      padding: .16rem 0 .14rem .16rem;
      font-size: .16rem;
      color: #333;
    }
    &__address {
      line-height: .2rem;
      padding: 0 .4rem 0 .16rem;
      font-size: .14rem;
      color: #333;
    }
    &__info {
      padding: .06rem 0 0 .16rem;
      height: .18rem;
      font-size: .12rem;
    }
    &__infoname, &__infotel {
      margin-right: .06rem;
      line-height: .18rem;
      color: #666;
    }
    &__enter {
      position: absolute;
      right: 0.16rem;
      top: 0.5rem;
      color: #666;
      font-size: .2rem;
    }
  }
}
.products {
  position: absolute;
  top: 2.1rem;
  left: 0;
  right: 0;
  bottom: .5rem;
  overflow-y: scroll;
  margin: 0.1rem 0.18rem 0;
  &__title {
    font-size: .16rem;
    line-height: .2rem;
    padding: .15rem .16rem 0;
    background-color: #fff;
  }
  &__item {
    display: flex;
    position: relative;
    padding: .15rem .16rem;
    background-color: #fff;
    &__img {
      width: .46rem;
      height: .46rem;
      margin-right: .16em;
    }
    &__detail {
      width: calc(100% - .62rem);
    }
    &__title {
      margin: 0;
      // width: calc(100% - .62rem);
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #333;
      @include ellipsis;
    }
    &__price {
      display: flex;
      justify-content: space-between;
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.15rem;
      &__yen {
        color: #e33030;
      }
      &__totalprice{
        margin-right: .07rem;
      }
    }
  }
}

.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: .49rem;
  line-height: .49rem;
  background-color: #fff;
  &__price {
    flex: 1;
    text-indent: .24rem;
    font-size: .16rem;
    color: #333;
  }
  &__btn {
    width: .98rem;
    color: #fff;
    text-align: center;
    font-size: .14rem;
    background: #a8edea;
  }
}
.mask {
  z-index: 1;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  &__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 1.56rem;
    background-color: #fff;
    border-radius: .04rem;
    &__title {
      margin-top: .24rem;
      line-height: .26rem;
      font-size: .18rem;
      color: #333;
      text-align: center;
    }
    &__desc {
      margin-top: .08rem;
      font-size: .14rem;
      color: #666;
      text-align: center;
    }
    &__btns {
      display: flex;
      margin: .24rem .58rem;
    }
    &__btn {
      flex: 1;
      width: 0.8rem;
      line-height: 0.32rem;
      border: .01rem solid #a8edea;
      font-size: .14rem;
      border-radius: .06rem;
      text-align: center;
      &--quit {
        margin-right: .24rem;
        border: .01rem solid #a8edea;
        color: #a8edea;
      }
      &--sure {
        margin-left: .24rem;
        color: #fff;
        background-color: #a8edea;
      }
    }
  }
}
</style>
